<template>
  <div class="main-content">
    <c-r-m-list-head
      ref="listHead"
      :search.sync="search"
      :crm-type="crmType"
      :log-type="logType"
      :main-title="'新建'+logName+'日志'"
      :placeholder="'请输入'+logName+'名称'"
      title="跟进记录"
      @change-log="changefollowRecord"
      @on-handle="listHeadHandle"
      @on-search="crmSearch"
      @on-export="exportInfos"/>
    <div
      v-empty="!crm.followRecord.index"
      xs-empty-icon="nopermission"
      xs-empty-text="暂无权限"
      class="crm-container">
      <c-r-m-table-head
        ref="crmTableHead"
        :crm-type="crmType"
        :log-type="logType"
        @exportData="exportData"
        @filter="handleFilter"
        @handle="handleHandle"
        @scene="handleScene"/>
      <div v-loading="loading">
        <el-row class="follow-record" :style="{'height':recordTableHeight+'px'}" v-if="list.length">
          <el-col class="follow-record-list">
            <div style="height:100%;overflow:auto;">
              <ul
                style="min-height: calc(100% - 35px)"
                v-infinite-scroll="scrollCurrentChange"
                infinite-scroll-disabled="disabled">
                <div >
                  <li v-for="(item,index) in list" :key="index" @click="selectFollowFun(item,index)" class="list-item" :class="{'is-active': index == selcetFollowIndex}">
                    <flexbox class="item-header">
                      <el-row style="position:absolute;top: 0;left: 0">
                        <div
                          v-photo="{img: item.userImg, realname: item.realname}"
                          v-lazy:background-image="$options.filters.filterUserLazyImg(item.userImg)"
                          class="item-photo"/>
                      </el-row>

                      <div class="item-message">
                        <flexbox style="line-height: 1">
                          <span>{{item.realname}}</span>
                          <span style="color:#606266;margin-left: 10px;font-size: 13px">{{item.createTime}}</span>
                        </flexbox>
                        <flexbox style="padding-top: 8px;align-items: flex-start">
                          <span style="color:#606266;margin-right: 10px;max-width: 100px;font-size: 13px">{{item.category}}</span>
                          <span style="color:#606266;padding-left: 10px;border-left: 1px solid;max-width: calc(100% - 100px);font-size: 13px">{{item.customerName}}</span>
                        </flexbox>
                      </div>
                      <div @click.stop="deleteFollowRecord(item)"><i class="el-icon-delete" style="color: red;font-size: 18px"></i></div>
                    </flexbox>
                    <flexbox style="margin-top: 10px;">
                      <span style="white-space: nowrap;overflow: hidden;text-overflow: ellipsis;" v-html="item.contentOne ? item.contentOne : item.content">{{item.contentOne ? item.contentOne : item.content}}</span>
                    </flexbox>
                    <flexbox style="margin-top: 10px;align-items: flex-start">
                      <label style="min-width: 70px;color: #94969a">联系人：</label>
                      <flexbox wrap="wrap">
                        <el-tag
                          v-for="(contacts,index) in item.contactsList"
                          :key="index"
                          size="small"
                          style="margin: 0 5px 5px 0px" @click.stop="relativeClick('contacts',contacts.contactsId)">
                          {{contacts.name}}
                        </el-tag>
                      </flexbox>
                    </flexbox>
                    <!-- <flexbox style="margin-top: 10px;align-items: flex-start" v-if="item.businessList.length">
                      <label style="min-width: 70px;color: #94969a">关联业务：</label>
                      <div style="width:calc(100% - 70px)">
                        <flexbox style="margin: 0 5px 5px 0px;color: #20A0FF" class="link-content"
                          v-for="(business,index) in item.businessList"
                          :key="index" @click.native.stop="relativeClick('business',business.businessId)">
                          <span style="white-space: nowrap;overflow: hidden;text-overflow: ellipsis;">
                            销售机会（{{business.businessName}}）
                          </span>
                        </flexbox>
                      </div>
                    </flexbox> -->
                  </li>
                </div>
              </ul>
              <p v-show="dataLoading" style="height:30px;width: 100%;text-align: center;line-height: 30px;">加载中<i class="el-icon-loading"></i></p>
              <p v-show="noMore" style="height:30px;width: 100%;text-align: center;line-height: 30px;">没有更多了</p>
            </div>
          </el-col>
          <el-col class="follow-record-detail">
            <div style="height: 100%;overflow: auto;background-color: white;padding: 10px 10px 0 10px">
              <flexbox class="detail-title">
                <label>基本信息</label>
              </flexbox>
              <flexbox class="detail-content">
                <div class="detail-message">
                  <flexbox class="detail-item">
                    <label>客户名称：</label>
                    <el-tag size="small" @click.stop="relativeClick('customer',detailInfo.typesId)">
                      {{detailInfo.customerName}}
                    </el-tag>
                  </flexbox>
                  <flexbox class="detail-item" v-if="logType == 'businessFollowRecord'">
                    <label>商机名称：</label>
                    <el-tag size="small" @click.stop="relativeClick('business',detailInfo.typesId)">
                      {{ detailInfo.businessName }}
                    </el-tag>
                  </flexbox>

                  <flexbox class="detail-item">
                    <label>联系人：</label>
                    <flexbox wrap="wrap">
                      <el-tag
                        v-for="(contacts,index) in detailInfo.contactsList"
                        :key="index"
                        size="small" style="margin: 0 5px 5px 0px" @click.stop="relativeClick('contacts',contacts.contactsId)">
                        {{contacts.name}}
                      </el-tag>
                    </flexbox>
                  </flexbox>

                  <flexbox class="detail-item">
                    <label>跟进方式：</label>
                    <span>{{detailInfo.category}}</span>
                  </flexbox>

                  <flexbox class="detail-item">
                    <label>下次联系时间：</label>
                    <span>{{detailInfo.nextTime}}</span>
                  </flexbox>
<!--
                  <flexbox class="detail-item">
                    <label>关联业务：</label>
                    <div style="width:calc(100% - 120px)">
                      <flexbox style="margin: 0 5px 5px 0px;color: #20A0FF"
                        v-for="(business,index) in detailInfo.businessList"
                        :key="index" @click.native.stop="relativeClick('business',business.businessId)">
                        <el-tag size="small" style="white-space: nowrap;overflow: hidden;text-overflow: ellipsis;">
                          销售机会（{{business.businessName}}）
                        </el-tag>
                      </flexbox>
                    </div>
                  </flexbox> -->

                  <flexbox class="detail-item">
                    <label>跟进内容：</label>
                    <pre style="font-family: 'MicrosoftYaHei', 'Avenir', Helvetica, Arial, sans-serif;white-space:pre-line;" v-html="detailInfo.content">{{detailInfo.content}}</pre>
                  </flexbox>

                  <flexbox class="detail-item">
                    <label>附件：</label>
                    <div style="width:calc(100% - 120px)">
                      <flexbox style="margin: 0 5px 5px 0px;color: #20A0FF" class="link-content"
                        v-for="(file,index) in detailInfo.file"
                        :key="index"  @click.native="handleFilePreview(detailInfo.file,index)">
                        <span style="white-space: nowrap;overflow: hidden;text-overflow: ellipsis;">{{file.name}}</span>
                      </flexbox>
                    </div>
                  </flexbox>

                  <flexbox class="detail-item">
                    <label>图片：</label>
                    <div>
                      <flexbox style="margin: 0 5px 5px 0px;color: #20A0FF;" wrap="wrap">
                        <div
                          v-for="(img,index) in detailInfo.img"
                          v-lazy:background-image="img.filePath"
                          :key="index"
                          class="img-item" @click="handleFilePreview(detailInfo.img,index)"/>
                      </flexbox>
                    </div>
                  </flexbox>

                </div>
              </flexbox>
              <flexbox class="detail-title">
                <label>系统信息</label>
              </flexbox>
              <flexbox class="detail-content">
                <div class="detail-message">
                  <flexbox class="detail-item">
                    <label>创建人：</label>
                    <span>{{detailInfo.realname}}</span>
                  </flexbox>

                  <flexbox class="detail-item">
                    <label>创建时间：</label>
                    <span>{{detailInfo.createTime}}</span>
                  </flexbox>
                </div>
              </flexbox>
            </div>
          </el-col>
        </el-row>
        <div
          v-else
          v-empty="!list.length"
          xs-empty-icon="empty"
          xs-empty-text="暂无数据"
          :style="{'height':recordTableHeight+'px'}"
          >
        </div>
      </div>
    </div>
    <!-- 相关详情页面 -->
    <c-r-m-all-detail
      :visible.sync="showDview"
      :crm-type="rowType"
      :id="rowID"
      class="d-view"
      @handle="handleHandle"/>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import CRMAllDetail from '@/views/customermanagement/components/CRMAllDetail'
import table from '../mixins/table'
import {
  crmRecordDelete
} from '@/api/customermanagement/common'

export default {
  /** 跟进记录列表 */
  name: 'FollowRecordIndex',
  components: {
    CRMAllDetail
  },
  mixins: [table],
  data() {
    return {
      crmType: 'followRecord',
      logType: 'followRecord',
      dataLoading: false,
      selcetFollowIndex: 0,
      detailInfo: {}
    }
  },
  computed: {
    ...mapGetters(['CRMConfig']),
    noMore() {
      return this.list.length >= this.total
    },
    disabled() {
      return this.dataLoading || this.noMore
    }
  },
  watch: {
  },
  mounted() {},
  methods: {
    selectFollowFun(item,index){
      this.selcetFollowIndex = index;
      this.detailInfo = item;
    },

    relativeClick(pageType,id) {
      this.rowID = id
      this.rowType = pageType
      this.showDview = true
    },

    /** 通过回调控制style */
    cellStyle({ row, column, rowIndex, columnIndex }) {
      if (
        column.property === 'customerName' ||
        column.property === 'businessCheck'
      ) {
        return { color: '#3E84E9', cursor: 'pointer' }
      } else {
        return ''
      }
    },
    // 商机信息查看
    businessCheckClick(e, scope) {
      if (scope.row.businessCount == 0) {
        return
      }
      this.$set(scope.row, 'show', !scope.row.show)
      const popoverEl = e.target.parentNode
      popoverEl.__vue__.showPopper = !scope.row.show
    },
    businessClose(e, scope) {
      const popoverEl = e.parentNode
      popoverEl.__vue__.showPopper = false
      this.$set(scope.row, 'show', false)
    },

    // 查看文件
    handleFilePreview(list,index) {
      this.$bus.emit('preview-image-bus', {
        index: index,
        data: list.map(function(item, index) {
          item.url = item.filePath
          return item
        })
      })
    },

    //删除记录
    deleteFollowRecord(item){
      this.$confirm('您确定要删除该条记录吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        let params = {
          recordId: item.recordId
        }
        crmRecordDelete(params).then((res) => {
          this.getList();
        })
      })
      .catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    }
  }
}
</script>

<style lang="scss" scoped>
@import '../styles/table.scss';
.customer-lock {
  color: #f15e64;
}
.follow-record{
  min-width: 900px;
  background-color: #eee;
  .follow-record-list{
    width: 500px;
    height: 100%;
    box-sizing: border-box;
    padding: 10px 10px 0 20px;
    .list-item{
      margin-bottom: 10px;
      box-sizing: border-box;
      border-radius: 5px;
      padding: 10px;
      background-color: white;
      border-left: 4px solid white;
      cursor: pointer;
      &:hover{
        box-shadow: 0 0 8px 0 #d8e1ed;
        background-color: #fafafa;
      }
      .item-header{
        position: relative;
        .item-photo{
          width: 40px;
          height: 40px;
          background-size: contain;
          background-repeat: no-repeat;
          background-position: center;
        }
        .item-message{
          padding-left: 50px;
          width: 100%;
        }
      }
    }

    .is-active{
      border-left: 4px solid orange;
    }
  }
  .follow-record-detail{
    width: calc(100% - 500px);
    height: 100%;
    box-sizing: border-box;
    padding-top: 10px;
    .detail-title{
      margin-bottom: 10px;
      padding-left: 10px;
      border-left: 4px solid orange;
      font-weight: bold;
    }
    .detail-content{
      position: relative;
      .detail-message{
        width: 100%;
        padding-left: 14px;
        .detail-item{
          min-height: 40px;
          padding-top: 10px;
          align-items: flex-start;
          /deep/ em{
            font-weight: bold;
          }
          label{
            min-width: 120px;
            padding-right: 10px;
            text-align: left;
            color: #94969a
          }
          .img-item {
            width: 50px;
            height: 50px;
            display: inline-block;
            margin: 0 4px 4px 0;
            background-size: contain;
            background-repeat: no-repeat;
            background-position: center;
            position: relative;
            cursor: pointer;
          }
        }
      }
    }
  }

  .el-tag{
    cursor: pointer;
    &:hover{
      font-weight: bold;
    }
  }

  .link-content{
    cursor: pointer;
    &:hover{
      background-color: #eee
    }
  }
}
</style>
